<template>
  <div class="chart-container app-container nohead">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="8">
              <el-form-item label="所属单位" prop="cid" >
                <el-select v-model="query.cid" placeholder="请选择所属单位" :style='{"width":"100%"}' >
                  <el-option v-for="(item, index) in cidOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
			    <!-- <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button> -->
			  </el-row>
        <div id="chart" style="height:530px;margin-top:30px;"></div>
  </div>
</template>

<script>
import request from '@/utils/request'
import echarts from 'echarts'
import resize from '../extend/graphDemo/mixins/resize'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
  // name: 'extend-graphDemo-echartsBar',
  name: 'extend-graphDemo-highchartsLine',
  mixins: [resize],
  data() {
    return {
      chart: null,
      option:{},
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      query: {
        cid: undefined
      },
      cidOptions:[],
    }
  },
  created(){
    this.getSydwOptions();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    if (!this.chart1) {
      return
    }
  },
  methods: {
    getSydwOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.cidOptions = res.data
        this.query.cid = this.cidOptions[0].F_Id;
        this.initChart();
        this.search();
			})
		},
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption(this.option)
    },
    search() {
      let query = {
        ...this.listQuery,
      };
      request({
        url: `/api/System/QYSCZDWXY/Actions/wxytj/`+this.query.cid,
            method: 'get',
            data: query
        }).then(res => {
            let datas = res.data;
            let xData = [];
            let seriesData = [];
            if(datas.length > 0){
              for(let i=0;i<datas.length;i++){
                xData.push(datas[i].qy);
                seriesData.push(
                  {
                    name: '一级',
                    type: 'bar',
                    barGap: 0,
                    label: '',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [datas[i].one]
                  },
                  {
                    name: '二级',
                    type: 'bar',
                    barGap: 0,
                    label: '',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [datas[i].two]
                  },
                  {
                    name: '三级',
                    type: 'bar',
                    barGap: 0,
                    label: '',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [datas[i].three]
                  },
                  {
                    name: '四级',
                    type: 'bar',
                    barGap: 0,
                    label: '',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [datas[i].four]
                  }
                );
              }
            }

            this.option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                }, 
                color:['#FF0000','#FF9500','#FFFF00','#63CCFF'],
                legend: {
                    data: ['一级', '二级', '三级', '四级']
                },
                toolbox: {
                    show: true,
                    // orient: 'vertical',
                    // left: 'right',
                    // top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: seriesData
            }
            this.initChart()
      })  
    },
    reset() {
      for (let key in this.query) {
          this.query[key] = undefined
      }
      this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
      }
      this.search();
    }
  }
}
</script>